<template>
  <div class="dt-table-select">
    <!-- 选择框 -->
    <div :class="{ isdisabled: disabled}" style="display: flex">
      <div class="select-tag" @click="openDialog">
        <div>
          <template v-if="showField">
            <el-tag v-for="(tag, index) in tagList" :key="index" type="info"
                    @close="closeTag(tag)">
              {{ tag[showField] || "" }}
            </el-tag>
          </template>
          <span v-if="!tagList.length" class="plactext">{{ placeholder }}</span>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <dt-dialog
      :title="title"
      append-to-body
      :visible.sync="visible"
      width="1250px"
      @closeDialog="cancel"
      @comfirmBtn="comfirm"
    >
      <dt-table
        ref="resourceTable"
        v-loading="loading"
        :table-opts="tableOpts"
        :is-column-search="false"
        :pagination-data="{
          total: total,
          queryParams: filterForm
        }"
        @pagination="pagination"
        @searchReset="handleReset"
        @searchChange="handleQuery"
        @selection-change="handleSelectionChange"
        @current-change="handleCurrentChange"
      />
    </dt-dialog>
  </div>
</template>

<script>
export default {
  name: 'BusinessAssociat',
  props: {
    // 是否多选
    multiple: {
      type: Boolean,
      default: true
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    // 展示字段名
    showField: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      title: '选择',
      tagList: [],
      visible: false, // 弹窗是否展示
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 用户组织机构关联表格数据
      list: [],
      // 查询参数
      filterForm: {
        pageNo: 1,
        pageSize: 10,
        parentId: '',
        level: 0,
        resourceName: ''
      },
      tableOpts: {
        rowKey: 'resourceId',
        highlightCurrentRow: false,
        moreSearch: true,
        tableData: [],
        customSearch: [],
        // 表格第一列
        firstTableCol: {
          select: false,
          width: 55,
          type: 'selection'
        },
        toolbarBtn: [
          {
            label: '关联接口',
            type: 'primary',
            permission: ['INTERFACEPERMISSION_ADD_BUTTON'],
            size: 'small',
            click: () => {
              this.association()
            }
          },
          {
            label: '批量解除',
            size: 'small',
            type: '',
            permission: ['INTERFACEPERMISSION_DELMORE_BUTTON'],
            click: () => {
              this.disassociationMore()
            }
          }
        ],
        tableCol: [
          {
            prop: 'resourceName',
            label: '接口名',
            show: true,
            align: 'left',
            search: true
          }, {
            prop: 'resourceName1',
            label: '接口名1',
            show: true,
            align: 'left',
            search: true
          }, {
            prop: 'resourceName2',
            label: '接口名2',
            show: true,
            align: 'left',
            search: true
          }, {
            prop: 'resourceName3',
            label: '接口名3',
            show: true,
            align: 'left',
            search: true
          }, {
            prop: 'resourceName4',
            label: '接口名4',
            show: true,
            align: 'left'
          },
          {
            prop: 'resourceUrl',
            label: 'URL',
            align: 'left',
            show: true
          },
          {
            prop: 'httpMethod',
            label: '请求方式',
            align: 'left',
            show: true
          }
        ],
        operator: {
          width: 115,
          align: 'left',
          operatorBtn: [
            {
              text: '解除关联',
              permission: ['INTERFACEPERMISSION_DEL_BUTTON'],
              size: 'small',
              click: (row, col, cellValue) => { return this.disassociation(row) }
            }
          ]
        }
      },
      multipleSelection: []
    }
  },
  methods: {
    // 单选
    handleCurrentChange(val) {
      !this.multiple && (this.multipleSelection = [val])
    },
    openDialog() {
      this.tableOpts.firstTableCol.select = this.multiple // 是否多选
      this.tableOpts.highlightCurrentRow = !this.multiple
      this.visible = true
      this.getList()
    },
    cancel() {
      this.visible = false
    },
    comfirm() {
      this.tagList = JSON.parse(JSON.stringify(this.multipleSelection))
      const temp = this.multipleSelection.map((item) => item[this.showField])
      this.$emit('input', temp)
    },
    // 多选框选中数据
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    getList() {
      // this.loading = true
      // 在这里请求接口
      this.tableOpts.tableData = [
        {
          resourceId: 1,
          resourceName: '李四'
        }, {
          resourceId: 2,
          resourceName: '王五'
        }, {
          resourceId: 3,
          resourceName: '张三'
        }, {
          resourceId: 4,
          resourceName: '四六'
        }
      ]
    },
    /** 搜索按钮操作 */
    handleQuery(formModel) {
      this.filterForm = { ...this.filterForm, ...formModel }
      // this.$refs.resourceTable.clearSelection()
      this.filterForm.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    handleReset() {
      this.filterForm = {
        pageNo: 1,
        pageSize: 10,
        parentId: '',
        level: 0,
        resourceName: ''
      }
      this.handleQuery()
    },
    pagination() {
      this.getList(this.filterForm)
    },
    // 关联association
    association() {
      this.$refs.associationRef.openApi(this.menuBtnInfo)
    },
    // 批量解除
    disassociationMore() {

    }
  }
}
</script>

  <style lang="scss" scoped>
  .dt-table-select{
      .select-tag {
      border: 1px #c0c4cc solid;
      border-radius: 5px;
      cursor: pointer;
      width: 100%;
      height: 100%;
      padding: 0px 8px 0 8px;
      margin: auto;
      min-height: 36px;
      line-height: 36px;
      min-width: 200px;

      > div {
        margin: auto;
      }

      .el-tag {
        margin-right: 5px;
        margin-bottom: 4px;
      }
    }

    .isDisabled {
      background-color: #f5f7fa;
      border-color: #e4e7ed;
      color: #c0c4cc;
      cursor: not-allowed;
    }

    .plactext {
      color: #dcdfe6;
    }
  }

  </style>

